/** 
 
*/
import React, { PureComponent } from 'react';
import { FirstHeaderC, TableC, NoDataMaskC } from '../../../../components';
import { Row, Col, Spin, Tooltip } from 'antd';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import moment from 'moment';
import myStyle from './style.less';
import accounting from 'accounting';

class BaseInfoC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      columns: [],
      dataSource: [],
      baseInfo: undefined, // 基础信息数据
      masking: true, // 蒙版
    };
  }

  componentDidMount() {
    this.changeColumns();
  }

  componentDidUpdate(preProps) {
    const { tradingCode } = this.props;
    if (tradingCode) {
      if (tradingCode !== preProps.tradingCode) {
        this.queryBaseInfo(tradingCode); // 更新基本信息
      }
    }
  }

  queryBaseInfo = (tradingCode) => {
    if (tradingCode) {
      this.setState({
        masking: false,
      });
      this.props.dispatch({
        type: 'nonstandardOrderM/getBaseInfo',
        payload: {
          tradingCode,
        },
        callback: (res) => {
          if (res.code == '0') {
            let tempData = {};
            tempData = this.changeInfoData(res.data);
            res.data.zgtzptNonstandarCashFlows.sort((a, b) => {
              if (a.startDate < b.startDate) {
                return -1;
              } else if (a.startDate > b.startDate) {
                return 1;
              }
              return 0;
            });
            this.setState({
              baseInfo: tempData,
              dataSource: res.data.zgtzptNonstandarCashFlows,
            });
          } else {
            this.setState({
              dataSource: [],
              baseInfo: undefined, // 基础信息数据
              masking: true,
            });
          }
        },
      });
    } else {
      this.setState({
        dataSource: [],
        baseInfo: undefined, // 基础信息数据
        masking: true,
      });
    }
  };

  // 处理表格样式展示
  changeColumns = () => {
    const columnsTemp = [
      { title: '开始日期', key: 'startDate' },
      { title: '结束日期', key: 'endDate' },
      { title: '付息金额', key: 'payInterestAmount' },
      { title: '还本金额', key: 'repaymentAmount' },
    ];
    const cloneColumns = columnsTemp.concat();
    if (cloneColumns && cloneColumns.length) {
      cloneColumns.map((value) => {
        if (value.key === 'payInterestAmount' || value.key === 'repaymentAmount') {
          value.type = 'money';
          value.width = 150;
        }
        if (value.key === 'startDate' || value.key === 'endDate') {
          value.render = (text, record, index) => {
            if (text === null || text === undefined) {
              return '--';
            } else {
              return moment(text).format('YYYY-MM-DD');
            }
          };
        }
      });
    }
    this.setState({
      columns: cloneColumns,
    });
  };

  changeInfoData = (oldinfo) => {
    const tempObj = {};
    for (const k in oldinfo) {
      if (k === 'startDate' || k === 'endDate') {
        // 到息日和起息日需要改为'2020-10-10'
        if (oldinfo[k]) {
          tempObj[k] = moment(oldinfo[k]).format('YYYY-MM-DD');
          continue;
        }
      }
      if (k === 'fixedRate' || k === 'floatingRate') {
        // 固定利率和浮动利率需要*100加%
        if (oldinfo[k]) {
          tempObj[k] = `${(Number(oldinfo[k]) * 100).toFixed(2)}%`;
          continue;
        }
      }
      if (k === 'parTotalValue' || k === 'spareFaceValue' || k === 'issueScale') {
        // 发行规模，票面面额和剩余票面面额 按千分位展示
        if (oldinfo[k]) {
          tempObj[k] = accounting.formatNumber(Number(oldinfo[k]), 2);
          continue;
        }
      }
      if (k === 'isBreakEve' || k === 'isFinance') {
        // 是否保本和是否金额产品 展示  '是'或'否'
        if (oldinfo[k]) {
          tempObj[k] = oldinfo[k] === 'N' ? '否' : '是';
          continue;
        }
      }
      tempObj[k] = oldinfo[k];
    }
    return tempObj;
  };

  findDictByKeys = (data, type) => {
    const value = data?.find((i) => i.value == type)?.title;
    if (value == undefined) {
      return '--';
    } else {
      return value;
    }
  };

  showBaseInfo = () => {
    const { baseInfo, masking } = this.state;
    const {
      nonstandarmaintenanceNewM: { dictMapSelect },
    } = this.props;
    return (
      <div style={{ position: 'relative', marginBottom: '10px' }}>
        {/* *******************************第一行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>证券代码:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.tradingcode ? baseInfo.tradingcode : '--') : '--'}</span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>证券全称:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <Tooltip title={baseInfo ? (baseInfo.tradingname ? baseInfo.tradingname : '') : ''}>
              <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.tradingname ? baseInfo.tradingname : '--') : '--'}</span>
            </Tooltip>
          </Col>
        </Row>
        {/* *******************************第二行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>资产类别:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <Tooltip title={baseInfo ? (baseInfo.assetType ? baseInfo.assetType : '') : ''}>
              <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.assetType ? baseInfo.assetType : '--') : '--'}</span>
            </Tooltip>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>融资人:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <Tooltip title={baseInfo ? (baseInfo.issuer ? baseInfo.issuer : '') : ''}>
              <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.issuer ? baseInfo.issuer : '--') : '--'}</span>
            </Tooltip>
          </Col>
        </Row>
        {/* *******************************第三行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>币种:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.currency ? this.findDictByKeys(dictMapSelect.INVEST_CURRENCY, baseInfo.currency) : '--') : '--'}</span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>初始份额面值:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.parTotalValue ? baseInfo.parTotalValue : '--') : '--'}</span>
          </Col>
        </Row>
        {/* *******************************第四行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>发行规模:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.issueScale ? baseInfo.issueScale : '--') : '--'}</span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>利率类型:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.rateType ? baseInfo.rateType : '--') : '--'}</span>
          </Col>
        </Row>
        {/* *******************************第五行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>计息基础:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>
              {baseInfo ? (baseInfo.interestBasis ? this.findDictByKeys(dictMapSelect.ASSETS_INTEREST_BASIS, baseInfo.interestBasis) : '--') : '--'}
            </span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>计息频率:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.interestRate ? `${baseInfo.interestRate}次/年` : '--') : '--'}</span>
          </Col>
        </Row>
        {/* *******************************第六行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>起息日:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.startDate ? baseInfo.startDate : '--') : '--'}</span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>到期日:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.endDate ? baseInfo.endDate : '--') : '--'}</span>
          </Col>
        </Row>
        {/* *******************************第七行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>利率:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.fixedRate ? baseInfo.fixedRate : '--') : '--'}</span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>担保方式:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>
              {baseInfo ? (baseInfo.guaranteeWay ? this.findDictByKeys(dictMapSelect.ASSETS_GUARANTEE_WAY, baseInfo.guaranteeWay) : '--') : '--'}
            </span>
          </Col>
        </Row>
        {/* *******************************第八行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>融资人主体评级:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>
              {baseInfo ? (baseInfo.mainRatingStart ? this.findDictByKeys(dictMapSelect.ASSETS_MAIN_RATING_START, baseInfo.mainRatingStart) : '--') : '--'}
            </span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>主体信用评级机构:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <Tooltip title={baseInfo ? (baseInfo.mainRatingDepart ? baseInfo.mainRatingDepart : '') : ''}>
              <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.mainRatingDepart ? baseInfo.mainRatingDepart : '--') : '--'}</span>
            </Tooltip>
          </Col>
        </Row>
        {/* *******************************第九行************************************* */}
        <Row className={myStyle.baseInfo_list}>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>资产评级:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <span className={myStyle.spanRight}>
              {baseInfo ? (baseInfo.debtRatingStart ? this.findDictByKeys(dictMapSelect.ASSETS_MAIN_RATING_START, baseInfo.debtRatingStart) : '--') : '--'}
            </span>
          </Col>
          <Col span={5} className={myStyle.baseItem}>
            <span className={myStyle.spanLeft}>资产信用评级机构:</span>
          </Col>
          <Col span={7} className={myStyle.baseItem}>
            <Tooltip title={baseInfo ? (baseInfo.debtRatingDepart ? baseInfo.debtRatingDepart : '') : ''}>
              <span className={myStyle.spanRight}>{baseInfo ? (baseInfo.debtRatingDepart ? baseInfo.debtRatingDepart : '--') : '--'}</span>
            </Tooltip>
          </Col>
        </Row>
        {masking ? <NoDataMaskC height={'330px'} title={'请选择证券代码,加载数据！'} /> : null}
      </div>
    );
  };

  render() {
    const { dataSource, columns, masking } = this.state;
    return (
      <div>
        <div>
          <FirstHeaderC title={'非标基础信息'} />
          <Spin spinning={this.props.loading.effects['nonstandardOrderM/getBaseInfo'] == true}>{this.showBaseInfo()}</Spin>
        </div>
        <div style={{ marginTop: '15px' }}>
          <FirstHeaderC title={'还本、付息日程'} />
          <div style={{ position: 'relative' }}>
            <Spin spinning={this.props.loading.effects['nonstandardOrderM/getBaseInfo'] == true}>
              <TableC columns={columns} dataSource={dataSource} scroll={{ y: '300px' }} hidePage={true} rowKey='id' />
            </Spin>
            {masking ? <NoDataMaskC height={'150px'} title={'请选择证券代码,加载数据！'} /> : null}
          </div>
        </div>
      </div>
    );
  }
}
export default connect(({ nonstandarmaintenanceNewM, nonstandardOrderM, loading }) => ({
  nonstandardOrderM,
  loading,
  nonstandarmaintenanceNewM,
}))(BaseInfoC);
